<template>
  <div>
    <h2>学校名称：{{$store.state.schoolName}} 学生人数：{{$store.state.students.length}} 姓王的人数:{{countWang}}</h2>

    <h2>分校列表</h2>
    <ul v-for="sch in $store.state.schools " :key="sch.id">
      <li>{{ sch.name }}</li>
    </ul>
    <input type="text" placeholder="输入分校名称" v-model="name">
    <button @click="addSch">添加一个分校</button>
    <button @click="addHb">添加一个分校,名称湖北开头</button>
  </div>
</template>
<script>

import {nanoid} from "nanoid";
  export default {
    name:'School',
    data(){
      return{name:''}
    },
    computed:{
      countWang(){
        return this.$store.getters.countWang
      }

    },
    methods:{
      addSch(){
        const sch = {id:nanoid(),name:this.name};
        this.$store.dispatch('addSch',sch)
        this.name = ''
      },
      addHb(){
        const sch = {id:nanoid(),name:this.name};
        this.$store.dispatch('addHb',sch)
        this.name = ''
      }
    }
  }

</script>
<style></style>
